<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.0.0}" rel="stylesheet" />
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
	<link href="../static/css/pindex.css" th:href="@{/css/pindex.css}" rel="stylesheet" />
</head>

<body class="gray-bg">
    <!-- <div class="row  border-bottom white-bg header">
    <div class="col-sm-9"></div>
        <div class="col-sm-3">        
            <ul class="navtop_tabs">
                <li class="tab-item active" data-id="0" style="width: 120px;height: 36px;line-height:36px">项目全过程管理</li>
                <a style="width: 120px;height: 36px;line-height:36px" href="/main/main1"><li class="tab-item" data-id="1" style="width: 120px;height: 36px;line-height:36px">项目施工管理</li></a>
            </ul>
        </div>
    </div> -->
    <div class="tabsbody ">
        <div class="tabsbody-item active">
            <div class="wrapper animated fadeInRight">
                <div class="row">
                    <div class="col-sm-6" style="padding: 0;">
                        <div class="ibox">
                            <div class="ibox-title">
                                <span class="label label-primary pull-left" style="font-size: 14px;">最新审批事项</span>
                            </div>
                            <div class="ibox-content setheight">
                                <ul class="uls">
                                    <li class="title" th:if="${mlList != null && mlList.size()!=0}" th:each="ml,stat : ${mlList}">
                                        <span class="tilte_bold" th:text="${ml.state}==null ? ' ':'【'+${ml.state}+'审批通过】'"></span>
                                        <span class="title_text" th:text="${ml.name}==null ? ' ':${ml.name}"></span>
                                    </li>
                                </ul>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6" style="padding: 0;">
                        <div class="ibox">
                            <div class="ibox-title">
                                <span class="label label-primary pull-left" style="font-size: 14px;">重点关注项目</span>
                                <!-- <h5></h5> -->
                            </div>
                            <div class="ibox-content setheight">
                                <ul class="uls">
                                	<li class="title" th:if="${tfpList != null && tfpList.size()!=0}" th:each="tfp,stat : ${tfpList}">
                                        <!-- <span class="title_text" th:text="${tfp.projectName}==null ? ' ':${tfp.projectName}"></span> -->
                                        <a class="title_text" th:text="${tfp.projectName}==null ? ' ':${tfp.projectName}" href="#" th:onclick="detailProjectTab([[${tfp.projectName}]],[[${tfp.guid}]])" style="color:#0026FF;"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                	<div class="col-sm-6" style="padding: 0;">
                        <div class="ibox">
                            <div class="ibox-title">
                                <span class="label label-primary pull-left" style="font-size: 14px;">年度施工许可数据统计</span>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-md-4" style="padding-left: 4px">
                                        <div class="grid-content">
                                            <p>本年度施工许可项目总数</p>
                                            <div class="">
                                                <span class="num" th:text="${consturctionTotal}==null ? '0':${consturctionTotal}"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4" style="padding-left: 4px">
                                        <div class="grid-content">
                                            <p>本年房建工程施工许可数</p>
                                            <div class="left">
                                                <span>报建数量：</span>
                                                <span class="color" th:text="${countConsturctionTotalFJ}==null ? '0':${countConsturctionTotalFJ}"></span>&nbsp;个
                                            </div>
                                            <div class="left">
                                                <span>报建规模：</span>
                                                <span class="color totalArea" th:text="${consturctionDevelopmentScopeFJ}==null ? '0':${consturctionDevelopmentScopeFJ}"></span>&nbsp;万m²
                                            </div>
                                            <div class="left">
                                                <span>总金额：</span>
                                                <span class="color allMoney" th:text="${consturctionCompactPriceFJ}==null ? '0':${consturctionCompactPriceFJ}"></span>&nbsp;亿
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4" style="padding-left: 4px">
                                        <div class="grid-content">
                                            <p>本年市政工程施工许可数</p>
                                            <div class="left">
                                                <span>报建数量：</span>
                                                <span class="color" th:text="${countConsturctionTotalSZ}==null ? '0':${countConsturctionTotalSZ}"></span>&nbsp;个
                                            </div>
                                            <div class="left">
                                                <span>总金额：</span>
                                                <span class="color allMoney" th:text="${consturctionCompactPriceSZ}==null ? '0':${consturctionCompactPriceSZ}"></span>&nbsp;亿
                                            </div>
                                        </div>
                                    </div>                                    
                                </div>
                                <div class="row">
                                    <div class="col-md-6" style="padding:0px">
                                        <div id="echart_a5"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div id="echart_a6"></div>
                                    </div>
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6" style="padding: 0;">
                        <div class="ibox">
                            <div class="ibox-title">
                                <span class="label label-primary pull-left" style="font-size: 14px;">年度竣工备案数据统计</span>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-md-4" style="padding-left: 4px">
                                        <div class="grid-content">
                                            <p>本年度竣工备案项目总数</p>
                                            <div class="">
                                                <span class="num" th:text="${completeTotal}==null ? '0':${completeTotal}"></span>
                                            </div>
                                        </div>
                                    </div>
                                        <div class="col-md-4" style="padding-left: 4px">
                                        <div class="grid-content">
                                            <p>本年房建工程竣工备案数</p>
                                            <div class="left">
                                                <span>报建数量：</span>
                                                <span class="color" th:text="${completeTotalFJ}==null ? '0':${completeTotalFJ}"></span>&nbsp;个
                                            </div>
                                            <div class="left">
                                                <span>报建规模：</span>
                                                <span class="color totalArea" th:text="${completeDevelopmentScopeFJ}==null ? '0':${completeDevelopmentScopeFJ}"></span>&nbsp;万m²
                                            </div>
                                            <div class="left">
                                                <span>总金额：</span>
                                                <span class="color allMoney" th:text="${completeCompactPriceFJ}==null ? '0':${completeCompactPriceFJ}"></span>&nbsp;亿
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4" style="padding-left: 4px">
                                        <div class="grid-content">
                                            <p>本年市政工程竣工备案数</p>
                                            <div class="left">
                                                <span>报建数量：</span>
                                                <span class="color" th:text="${completeTotalSZ}==null ? '0':${completeTotalSZ}"></span>&nbsp;个
                                            </div>
                                            <div class="left">
                                                <span>总金额：</span>
                                                <span class="color allMoney" th:text="${completeCompactPriceSZ}==null ? '0':${completeCompactPriceSZ}"></span>&nbsp;亿
                                            </div>
                                        </div>
                                    </div>
                         
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6" style="padding:0px">
                                        <div id="echart_a3"></div>
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <div id="echart_a4"></div>
                                    </div>
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="tabsbody-item">
            <div class="wrapper wrapper-content wrapperbg">

            </div>
        </div>
    </div>

    <script th:src="@{/js/sys/echarts-v4.1.0/echarts.min.js}"></script>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        $(document).ready(function () {
        	/* 施工许可  */
          	var columnarArray = [
        		{name: "1月", value: "0"},
	        	{name: "2月", value: "0"},
	        	{name: "3月", value: "0"},
	        	{name: "4月", value: "0"},
	        	{name: "5月", value: "0"},
	        	{name: "6月", value: "0"},
	        	{name: "7月", value: "0"},
	        	{name: "8月", value: "0"},
	        	{name: "9月", value: "0"},
	        	{name: "10月", value: "0"},
	        	{name: "11月", value: "0"},
	        	{name: "12月", value: "0"}
	        	];
         	var columnarList = [[${columnarList}]];
        	var columnarListDay = new Array();
        	var columnarListValue = new Array();
        	for(var i=0;i<columnarArray.length;i++){
        		for(var j=0;j<columnarList.length;j++){
    				if(columnarArray[i].name == columnarList[j].name){
    					columnarArray[i].value = columnarList[j].value;
    				}
    			}
        	}; 
        	for(var i=0;i<columnarArray.length;i++){
        		columnarListDay.push(columnarArray[i].name);
        		columnarListValue.push(columnarArray[i].value);
        	};
        	
        	/* 竣工备案  */
        	var columnarArray1 = [
        		{name: "1月", value: "0"},
	        	{name: "2月", value: "0"},
	        	{name: "3月", value: "0"},
	        	{name: "4月", value: "0"},
	        	{name: "5月", value: "0"},
	        	{name: "6月", value: "0"},
	        	{name: "7月", value: "0"},
	        	{name: "8月", value: "0"},
	        	{name: "9月", value: "0"},
	        	{name: "10月", value: "0"},
	        	{name: "11月", value: "0"},
	        	{name: "12月", value: "0"}
	        	];
        	var completeColumnarDay = new Array();
        	var completeColumnarValue = new Array();
        	var completeColumnar = [[${completeColumnar}]];
        	for(var i=0;i<columnarArray1.length;i++){
        		for(var j=0;j<completeColumnar.length;j++){
    				if(columnarArray1[i].name == completeColumnar[j].name){
    					columnarArray1[i].value = completeColumnar[j].value;
    				}
    			}
        	}; 
        	for(var i=0;i<columnarArray1.length;i++){
        		completeColumnarDay.push(columnarArray1[i].name);
        		completeColumnarValue.push(columnarArray1[i].value);
        	};
        	//tab
            $('.nav_tabs li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var index = $(this).index();

            })
            $('.navtop_tabs li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var index = $(this).index();
                $(".tabsbody .tabsbody-item").eq(index).show().siblings().hide();
            })
            maininit();
            
            $(".totalArea").each(function(index,val){
                $(this).text(Number($(this).text()/10000).toFixed(2))
            })
            $(".allMoney").each(function(index,val){
                $(this).text(Number($(this).text()/10000).toFixed(2))
            })
            
            // 主页
            function maininit() {

                echart_a3();
                echart_a4();
                echart_a5();
                echart_a6();

                function echart_a3() {

                    var echart_a3 = echarts.init(document.getElementById('echart_a3'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b}: {c}"
                        },
                        grid: {
                            containLabel: true
                        },
                        title: {
                            text: '本年度竣工备案工程项目类型分布图',
                            //subtext: '本年度报建建筑工程项目类型分布图',
                            // padding: 120,
                            textStyle: {
                                color: '#333',
                                fontSize: 14,
                                // align: 'center'
                            },
                            subtextStyle: {
                                fontSize: 14,
                                color: ['#333']
                            },
                            x: '50%',
                            y: '5%',
                            textAlign: 'center'
                        },
                        color: ['#ffcc00', '#ff6633', '#3366cc', '#999999'],
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            radius: ['30%', '50%'],
                            center: ['50%', '60%'],
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            label: {
                                normal: {
                                    formatter:function(e){
	                                   	 var newStr = '';
                                  		if(e.name.length >4){
                                  	 		newStr = e.name.slice(0,4) + '...';
                                  	 	}else{
                                  	 		newStr = e.name;
                                  	 	}
							                             　return newStr + '\n数量'+ e.value;
									}
                                }
                            },
                            data: [[${completePC}]]
                        }]
                    };
                    //赋值操作
                    echart_a3.setOption(option);
                    window.onresize = function () {
                        echart_a3.resize();
                    };
                }


                function echart_a4() {
                    var echart_a4 = echarts.init(document.getElementById('echart_a4'));
                    var option = {
                        title: {
                            text: '本年度竣工备案工程项目数量对比图',
                            // text: fjnumber,
                            //subtext: '本年度报建建筑工程项目类型分布图',
                            // padding: 120,
                            textStyle: {
                                color: '#333',
                                fontSize: 14,
                                // align: 'center'
                            },
                            subtextStyle: {
                                fontSize: 14,
                                color: ['#333']
                            },
                            x: '50%',
                            y: '5%',
                            textAlign: 'center'
                        },
                        grid: {
                            containLabel: true,
                            //top: '10%'
                            bottom: '10%'
                        },
                        xAxis: {
                            show: false,
                            name: 'amount',
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: completeColumnarDay
                        },
                        series: [{
                            type: 'bar',
                            barGap: '80%',
                            /*多个并排柱子设置柱子之间的间距*/
                            barCategoryGap: '50%',
                            /*多个并排柱子设置柱子之间的间距*/
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right'
                                },
                                formatter:function(e){
					                               　　　  var newStr=" ";
					               var start,end;
					                             　　　　var name_len=e.name.length;　
					                             　　　　var max_name=4;　　　　　　　　　　　　　
					                             　　　　var new_row = Math.ceil(name_len/max_name); 
					                             　　　　if(name_len>max_name){　　　　　　　　　　　　　
					                              　　　　　　for(var i=0;i<new_row;i++){　　　　　　　　　
					                               　　　　　　　　var old='';　　　　　　　　　　　　　　　　    
										 start = i*max_name;　　　　　　　     
										 end = start+max_name;　　　　　
					                               　　　　　　　　if(i==new_row-1){　　　　　　　   
											old=e.name.substring(start);
										}else{
											old=e.name.substring(start,end)+"\n";    
											 }
											newStr+=old; 
										 }
										}else{                                        
											newStr = e.name; 
								}
					                             　　　 return newStr;
								} 
                            },
                            data:completeColumnarValue
                        }]
                    };
                    //赋值操作
                    echart_a4.setOption(option);
                    window.onresize = function () {
                        echart_a4.resize()
                    };
                };

                function echart_a5() {

                    var echart_a5 = echarts.init(document.getElementById('echart_a5'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b}: {c}"
                        },
                        grid: {
                            containLabel: true
                        },
                        title: {
                            text: '本年度施工许可工程项目类型分布图',
                            //subtext: '本年度报建建筑工程项目类型分布图',
                            // padding: 120,
                            textStyle: {
                                color: '#333',
                                fontSize: 14,
                                // align: 'center'
                            },
                            subtextStyle: {
                                fontSize: 14,
                                color: ['#333']
                            },
                            x: '50%',
                            y: '5%',
                            textAlign: 'center'
                        },
                        color: ['#ffcc00', '#ff6633', '#3366cc', '#999999'],
                        series: [{
                            name: '',
                            type: 'pie',
                            radius: ['30%', '50%'],
                            center: ['50%', '60%'],
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            label: {
                                normal: {
                                    formatter:function(e){
	                                   	 var newStr = '';
                                   		if(e.name.length >4){
                                   	 		newStr = e.name.slice(0,4) + '...';
                                   	 	}else{
                                   	 		newStr = e.name;
                                   	 	}
							                             　return newStr + '\n数量'+ e.value;
									}
                                }
                            },
                            data: [[${pcList}]]
                        }]
                    };
                    //赋值操作
                    echart_a5.setOption(option);
                    window.onresize = function () {
                        echart_a5.resize();
                    };
                }


                function echart_a6() {
                    var echart_a6 = echarts.init(document.getElementById('echart_a6'));
                    var option = {
                        title: {
                            text: '本年度施工许可工程项目数量对比图',
                            // text: fjnumber,
                            //subtext: '本年度报建建筑工程项目类型分布图',
                            // padding: 120,
                            textStyle: {
                                color: '#333',
                                fontSize: 14,
                                // align: 'center'
                            },
                            subtextStyle: {
                                fontSize: 14,
                                color: ['#333']
                            },
                            x: '50%',
                            y: '5%',
                            textAlign: 'center'
                        },
                        grid: {
                            containLabel: true,
                            //top: '10%'
                            bottom: '10%'
                        },
                        xAxis: {
                            show: false,
                            name: 'amount',
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data:columnarListDay
                        },
                        series: [{
                            type: 'bar',
                            barGap: '80%',
                            /*多个并排柱子设置柱子之间的间距*/
                            barCategoryGap: '50%',
                            /*多个并排柱子设置柱子之间的间距*/
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right'
                                }
                            },
                            data: columnarListValue
                        }]
                    };
                    //赋值操作
                    echart_a6.setOption(option);
                    window.onresize = function () {
                        echart_a6.resize()
                    };
                }
            }
        });
        
        //跳转到项目详情
        function detailProjectTab(content,id){
        	url = "/projectArchives/projectArchives/detail/"+id;
        	$.modal.openTab(content+"详情", url);
        }
    </script>
</body>

</html>